<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>邀请内容页</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        body{background:#EE2C44;}
        #container{padding:0;padding-bottom:0.25rem;}
        .invite_head{display: block;width:90%;margin:0px auto;padding-top:0.3rem;}
        .invitePerson{margin-top:0.5rem;position:relative;}
        .invitePerson img{display:block;width:4rem;margin-left:1rem;margin-top:0.5rem;}
        .invitePerson .inviteRules{ box-shadow: 0px 0px 5px #FFF;position: absolute;right: 0;bottom: 0.8rem;background:rgba(255, 229, 180, 0.3);line-height: 0.32rem;font-size: 0.23rem;color: #FFE6A2;padding:0.14rem 0.15rem 0.12rem 0.3rem;border-radius: 1rem 0 0 1rem;}
        .inviteData{border-radius:0.3rem;width:calc(100% - 0.5rem);margin:0px auto;background:#FFF;margin-top:-0.4rem;padding:0.3rem;}
        .moneyBlock{background: linear-gradient(-30deg, #f1344c, #ff6d73); padding-bottom:0.33rem;border-radius: 0.3rem;}
        .moneyBlock>h3{border-bottom: 1px solid #ff707d;margin:0px auto;width:70%;line-height: 1.2rem;text-align: center;font-size: 0.41rem;font-weight: bold;color: white;letter-spacing: 0.06rem;}
        .getMoney{justify-content: center;padding:0.22rem 0;align-items: center;display: flex;}
        .getMoney .ell{font-size: 1.36rem;line-height:1.2rem;font-weight: bold;color: #ffe6a2;text-shadow: 0px 0.04rem 0.04rem rgba(193, 3, 26, 0.75);margin-right: 0.46rem;}
        .getMoney .r i{display:block; width: 1.04rem;height: 0.44rem;line-height: 0.44rem;border-radius: 0.2rem 0.3rem 0.3rem 0;background: #FFE6A2;color: #F33C52;font-weight: bold;text-align: center;margin-bottom: 0.16rem;}
        .getMoney .r span{display:block;font-size: 0.3rem;color: white;}
        .inviteRemark{height: 0.5rem;line-height: 0.5rem;text-align: center;font-size: 0.24rem;color: white;background: rgba(255, 255, 255, 0.14);}
        .in_title{padding:0 4%;height:0.7rem;line-height:0.7rem;}
        .in_title>img{float:left;width:calc((100% - 2.7rem) /2);height:0.3rem;margin-top:0.2rem;}
        .in_title h3{float:left;width:2.7rem;text-align:center;font-weight:bold;font-size:0.31rem;padding:0px 3%;}
        .myData{margin-top:0.65rem;}
        .lineTwo{padding-top:0.5rem;}
        .lineTwo>div{margin-bottom:0.6rem;float:left;width:50%;text-align:center;color:#797979;font-size:0.27rem;padding:0px 3%;}
        .lineTwo>div span{line-height:0.6rem;display: block;color:#F1344C;font-weight:bold;font-size:0.45rem;margin-bottom:0.1rem;}
        .lineTwo>div span font{font-size:0.24rem;font-weight:normal;margin-left:0.12rem;}
        .lineTwo>div:nth-last-child(1),.lineTwo>div:nth-last-child(2){margin-bottom:0;}
        .u-btn{margin-top:0.8rem;}
        .u-btn>div{ text-align: center;width:80%;margin: 0 auto;height: 0.9rem;font-size: 0.31rem;font-weight: bold;line-height: 0.9rem;border-radius: 0.45rem;}
        .u-btn .inviteBtn{background: linear-gradient(-90deg, #f1344c 0%, #ff616f 100%);box-shadow: 0px 0.07rem 0.35rem 0px rgba(243, 79, 56, 0.35);color: white;}
        .u-btn .recordBtn{border: 1px solid #ff6060;color: #f2384f;margin-top:0.55rem;}
        .getType{margin-top:0.85rem;}
        .getType ul{margin-top:0.6rem;}
        .getType ul li{margin-bottom:0.45rem;padding-left:0.3rem;}
        .getType ul li>.img{border-radius:0.13rem;float:left;width:1rem;height:1rem;line-height:1rem;background:#F8EBC9;text-align:center;vertical-align: middle;}
        .getType ul li>.img img{display:inline-block;height:0.5rem;vertical-align: middle;margin-top:-0.01rem;}
        .getType ul li>.info{padding-bottom:0.45rem;border-bottom:1px solid #F9F9F9;float:left;width:calc(100% - 1rem - 0.4rem);margin-left:0.4rem;}
        .getType ul li>.info h3{display:block;color:#999999;font-weight:normal;font-size:0.28rem;line-height:0.3rem;}
        .getType ul li>.info span{display:block;color:#333;font-size:0.28rem;line-height:0.3rem;margin-top:0.4rem;}
        .getType ul li>.info span font{color:#F95528;}
        .getType ul li:nth-last-child(1){margin-bottom:0;}
        .getType ul li:nth-last-child(1)>.info{border-bottom:0;}
        .rank{background:#FFF;border-radius:0.3rem;padding:0 0.3rem;padding-top:0.4rem;padding-bottom:0.01rem;width:calc(100% - 0.5rem);margin:0px auto;margin-top:0.3rem;}
        .changeRank{transition: 0.2s all;vertical-align: middle;margin-top:-0.02rem;margin-left:0.15rem;width:0.3rem;height:0.3rem;}
        .changeRank.ra{transform: rotate(-180deg);}
        .rankText{color: #FAB255;font-weight: normal;font-size: 0.28rem;line-height: 0.5rem;text-align: center;margin-top: 0.2rem;}
        .rank ul{margin-top:0.6rem;padding:0 0.2rem;}
        .rank ul li{position:relative;margin-bottom:0.7rem;}
        .rank ul li:nth-last-child(1){margin-bottom:0.6;}
        .rank ul li>img{float:left;width:1rem;height:1rem;border-radius:50%;}
        .rank ul li>div{float:left;padding-left:0.4rem;padding-right:0.2rem;width:calc(100% - 1rem - 0.45rem);}
        .rank ul li>div h3{font-weight:normal;color:#333;font-size:0.3rem;line-height:0.35rem;}
        .rank ul li>div p{font-size:0.28rem;color:#ACACAC;line-height:0.35rem;margin-top:0.25rem;}
        .rank ul li>div p font{color:#FF2323;}
        .rank ul li>i{position:absolute;right:0;top:50%;transform: translate(0, -50%);float:left;text-align:center;width:0.45rem;height:0.45rem;line-height:0.45rem;border-radius:50%;color:#A8A8A8;font-size:0.3rem;}
        .rank ul li:nth-child(1)>i{background:#FF4444;color:#FFF;}
        .rank ul li:nth-child(2)>i{background:#F8B551;color:#FFF;}
        .rank ul li:nth-child(3)>i{background:#DCDCDC;color:#FFF;}
        .rankShowMore{margin:0 0.2rem;display: block;height: 1rem;line-height: 1rem;text-align: center;font-size: 0.28rem;color: #6ca7ff;border-top: 1px dashed #e6e6e6;}
        .m-no{padding:0.25rem 0;}
        .m-no .u-spec{font-size:0.28rem}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="container">
            <img src="../../../image/invite/invite_head.png" class="invite_head" />
            <div class="invitePerson">
                <img src="../../../image/invite/invitePerson.png" />
                <i class="inviteRules" @click="showRule">邀请<br />规则</i>
            </div>
            <div class="inviteData">
                <div class="moneyBlock">
                    <h3>邀请1人最低可获得</h3>
                    <div class="getMoney">
                        <div class="ell">{{baseIncome || '0'}}</div>
                        <div class="r"><i>可提现</i><span>元</span></div>
                    </div>
                    <p class="inviteRemark">永久下级分佣，赚个盆满钵盈</p>
                </div>
                <div class="myData">
                    <div class="in_title clearfix">
                        <img src="../../../image/invite/titleRed1.png" />
                        <h3>我的邀请战绩</h3>
                        <img src="../../../image/invite/titleRed2.png" />
                    </div>
                    <div class="lineTwo clearfix">
                        <div><span class="ell">{{inviteInfo.user_down_1_count || 0}}<font>位</font></span>邀请人数</div>
                        <div><span class="ell">{{rank || 0}}<font>{{rankPlus}}</font></span>本月排名</div>
                        <div><span class="ell">{{todayIncome || 0}}<font>元</font></span>今日获得佣金</div>
                        <div><span class="ell">{{allIncome || 0}}<font>元</font></span>累计获得佣金</div>
                    </div>
                    <div class="u-btn">
                        <div class="inviteBtn" @click="onShare">开始邀请</div>
                        <div class="recordBtn" @click="openLayer('record');">邀请记录</div>
                    </div>
                </div>
                <div class="getType">
                    <div class="in_title clearfix">
                        <img src="../../../image/invite/titleYellow1.png" />
                        <h3>佣金奖励方式</h3>
                        <img src="../../../image/invite/titleYellow2.png" />
                    </div>
                    <ul>
                        <li class="clearfix">
                            <div class="img"><img src="../../../image/invite/inviteIcon1.png" /></div>
                            <div class="info">
                                <h3 class="ell">下级首次登陆app</h3>
                                <span class="ell">我得<font>{{(inviteInfo.subordinateFirstLoginApp && $.parsePrice(inviteInfo.subordinateFirstLoginApp, 2)) || 0}}</font>元红包</span>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="img"><img src="../../../image/invite/inviteIcon3.png" /></div>
                            <div class="info">
                                <h3 class="ell">下级首次完成任务</h3>
                                <span class="ell">我得<font>{{(inviteInfo.subordinateFirstTask && $.parsePrice(inviteInfo.subordinateFirstTask, 2)) || 0}}</font>元红包</span>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="img"><img src="../../../image/invite/inviteIcon2.png" /></div>
                            <div class="info">
                                <h3 class="ell">下级首次提现</h3>
                                <span class="ell">我得<font>{{(inviteInfo.subordinateFirstDrawn && $.parsePrice(inviteInfo.subordinateFirstDrawn, 2 ) || 0 )}}</font>元红包</span>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="img"><img src="../../../image/invite/inviteIcon4.png" /></div>
                            <div class="info">
                                <h3 class="ell">下级或下下级完成任务抽佣</h3>
                                <span class="ell">分别得<font>{{inviteInfo.fatherAcceptCommission || 0}}%，{{inviteInfo.grandpaAcceptCommission || 0}}%</font></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="rank">
                <div class="in_title clearfix">
                    <img src="../../../image/invite/titleYellow1.png" />
                    <h3 @click="toggleRankMonth">{{rankType == 0 ? '本' : '上'}}月排行榜<img src="../../../image/invite/changeRank.png" class="changeRank" :class="{ra:rankType==0}" /></h3>
                    <img src="../../../image/invite/titleYellow2.png" />
                </div>
				<div class="minHeightFull" v-if="list==null">
				    <div class="loadLayer"><span></span> <span></span> <span></span> <span></span> <span></span></div>
				</div>
                <template v-else>
					<h3 class="rankText" v-if="list.length>0">每月前20名可获得额外奖励（仅限下级人数）</h3>
					<ul :style="{'margin-top':list.length<=0?'0.2rem':''}">
					    <li class="clearfix" v-for="item,index in list" v-if="!rankShowMore?index<5:true">
					        <img :src="item.avatar" />
					        <div>
					            <h3 class="ell" v-text="item.name"></h3>
								<p>已邀<font>{{item.inviter_count}}</font>人,{{rankType == 1 ? '已' : '预计'}}奖励<font>{{item.forincome}}元</font></p>
					        </div>
					        <i>{{index+1}}</i>
					    </li>
					    <section class="m-no" v-if="list.length<=0">
					        <div class="u-img"></div>
					        <div class="u-spec">还没人上榜呢，赶快去邀请吧！</div>
					    </section>
					</ul>
					<a v-if="list.length>5 && !rankShowMore" class="rankShowMore" @click="rankShowMore=true">查看更多排行</a>
				</template>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    rankShowMore:false,
                    inviteInfo: {},
                    list:null,
                    rankType: 0,
                    isFething: false,
                    inviteRes:null,
                },
                computed:{
                    baseIncome: function(){
                        var lowestUsermoney = this.inviteInfo.lowestUsermoney;
                        if(isNaN(lowestUsermoney)){
                            return '-';
                        }
                        return $.parsePrice(lowestUsermoney, 0)
                    },
                    todayIncome: function(){
                        var today_income = this.inviteInfo.today_income;
                        if(today_income === null || isNaN(today_income) ){
                            return 0;
                        }
                        return $.parsePrice(today_income, 2);
                    },
                    allIncome: function(){
                        var all_income = this.inviteInfo.all_income;
                        if(all_income === null || isNaN(all_income) ){
                            return 0;
                        }
                        return $.parsePrice(all_income, 2);
                    },
                    rank: function(){
                        var range = this.inviteInfo.range;
                        var rank = range > 100 ? 100 : range;
                        if(!range){
                            return 0;
                        }
                        return rank;
                    },
                    rankPlus: function(){
                        return this.inviteInfo.range > 100 ? '+' : '';
                    },
                },
                methods:{
                    openLayer(type, data){
                        api.openFrame({
                            name: type,
                            pageParam: data,
                            useWKWebView:true,
                            url: type + '.html',
                            bgColor: 'rgba(0,0,0,0)',
                            animation:{
                                type:"fade"
                            }
                        });
                    },
                    fetchInviteInfo: function(){
                        var _this = this;
                        $.ajax({
                            url: '/get/invite/ordermy',
                            method: 'get',
                            load: true,
                            success: function(res){
                                _this.inviteInfo = res.data;
                            },
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
                    },
                    fetchRankList(load){
                        var _this = this;
                        this.isFething = true;
                        $.ajax({
                            url: '/get/invite/order?last='+_this.rankType,
                            method: 'get',
							load:load,
                            success: function(res){
                                _this.list = res.data;
                            },
                            error: function(err){
                                _this.list = [];
                                $.toast(err.message);
                            },
                            done: function(){
                                _this.isFething = false;
                            }
                        });
                    },
                    toggleRankMonth(){
                        if(this.isFething){
                            return false;
                        }
                        this.rankType = this.rankType ? 0 : 1;
                        this.fetchRankList(true);
                    },
                    showRule(){
                        this.openLayer('rule', {rule: this.inviteInfo.inviteInstroduce});
                    },
                    fetchInviteResource(){
                        var _this = this;
                        $.ajax({
                            url: '/get/invite_url',
                            method: 'get',
							load:true,
                            success: function(res){
                                _this.inviteRes = res.data;
								_this.onShare();
                            }
                        });
                    },
                    onShare(){
						if(this.inviteRes==null){
							this.fetchInviteResource();//获取邀请链接
							return;
						}
                        this.openLayer('share', {
                            url: this.inviteRes.url,
                            imgData: this.inviteRes.data
                        });
                    }
                },
                mounted(){
					$.initJs(this);
                    this.fetchInviteInfo();//获取邀请基本信息
                    this.fetchRankList();//邀请排行榜
                }
            });


            $.pullDown({
                bgColor:"#EE2C44",
                success:function(){
                    app.fetchInviteInfo();
                    app.fetchRankList();
                }
            });
        }
    </script>
</body>
</html>
